<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
	<meta charset="UTF-8">
	<title>CMS系统-公告信息管理</title>

	<!-- 引入样式 -->
	<link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
	<link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}">
	<link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}">
	<link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}"/>
	<!-- 引入组件库 -->
	<script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
	<script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
	<script src="../../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
	<script src="../../../../static/js/jquery.nestable.js" th:src="@{/js/jquery.nestable.js}"></script>
</head>
<body>
<div id="app" v-cloak>
	<div class="main-content">
			<div class="page-header">
				<h1 class="page-title">公告信息管理</h1>
				<div class="z-pop_question">
                    <el-popover
                            ref="popoverq"
                            placement="bottom-start"
                            width="400"
                            trigger="hover">
                        <p class="z-jiao">
						&nbsp;&nbsp;1、您可以快速推送，公告您的服务政策和优惠活动给您的客户<br/>
						&nbsp;&nbsp;2、可以为不同的公告，设置不同的公告类型，方便客户快速找到相关内容<br/>
						&nbsp;&nbsp;3、可以选择不同地区、类型的客户看到不同的公告<br/>
						&nbsp;&nbsp;<a href="javascript:;">查看更多帮助</a>
                        </p>
                    </el-popover>

                    <i v-popover:popoverq class="el-icon-question"></i>
                </div>
				<div class="breadcrumb"><a href="javascript: top.location.reload();">首页</a><span>/</span>内容<span>/</span>公告管理</div>
			</div>

				<div class="list-content">
					<!--条件筛选-->
					<div class="content_item_filter clearfix" :class="[hasfilterMore?'content_filter_more':'']">
					<div class="input-select fl btn-radid_none">
	                    <div class="filter-form filter-form-one clearfix">
	                        <el-input placeholder="公告标题" v-model="conditions.noticeTitle.value" clearable class="minW40 z_input-holder"></el-input>
	                        <el-select placeholder="上架状态" v-model="conditions.state.value" clearable class="z_select-holder">
	                            <el-option label="上架" value="1">上架 </el-option>
	                            <el-option label="下架" value="0">下架 </el-option>
	                        </el-select>
	                    </div>
	                    <div class="filter-operate">
	                        <div class="filter-more" @click="toggleMoreSearch" v-show="hasfilterMore"><i :class="[filterMore?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
	                        <el-tooltip class="item" content="查询" placement="bottom-start">
	                            <el-button icon="el-icon-search" @click="handleQuery"></el-button>
	                        </el-tooltip>
	                        <el-tooltip class="item" content="清空" placement="bottom-start">
	                            <el-button icon="el-extend-clean" @click="handleClear"></el-button>
	                        </el-tooltip>
	                    </div>
                   </div>
						<div class="filter-btn fr">
							<el-button type="primary" @click="handleAdd">新增公告</el-button>
						</div>
					</div>

					<!--主体表格-->
					<div class="z-tables">
						<el-table ref="multipleTable" :data="noticeList" style="width: 100%;" @selection-change="handleSelectionChange">
						    <el-table-column type="selection" width="55"></el-table-column>
							<el-table-column prop="noticeTitle" label="公告标题"></el-table-column>
							<el-table-column prop="noticeTypeName" label="公告类型"></el-table-column>
							<el-table-column prop="createTime" label="发布时间" ></el-table-column>
							<el-table-column prop="sortValue" label="排序" ></el-table-column>
							<el-table-column prop="stateName" label="上架状态"  ></el-table-column>
							<el-table-column fixed="right" label="操作" >
								<template slot-scope="scope">
									<el-button type="text" @click="handleEdit(scope.$position, scope.row)">编辑</el-button>
									<span class="table-spea-line">|</span>
									<el-button type="text" @click="handleDelete(scope.$position, scope.row)">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
                    
                    <!--批量操作-->
				   <div class="grid-content">
					<div class="bg-purple-left">
						<el-checkbox v-model="tableAllCheck" @change="tableAllCheckFn(noticeList)"></el-checkbox>
					<el-dropdown @command="handleCommand" placement="top">
						<div class="el-input el-input--suffix">
							<input type="text" value="批量操作" readonly="readonly" class="el-input__inner">
							<span class="el-input__suffix">
								<span class="el-input__suffix-inner"><i class="el-select__caret el-input__icon el-icon-arrow-up"></i></span>
							</span>
						</div>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="b">批量删除</el-dropdown-item>
						</el-dropdown-menu>
					   </el-dropdown>
					</div>
                    
					<!--分页-->
					<div class="bg-purple-light">
						<el-pagination
								@size-change="handleSizeChange"
								@current-change="handleCurrentChange"
								:current-page="currentPage"
								:page-sizes="pageSizeList"
								:page-size="pageSize"
								layout="total, sizes, prev, pager, next"
								:total="totalNum">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
	</div>
<script th:inline="javascript">
    new Vue({
        el: "#app",
        data: {
            noticeTypeList: [[${noticeTypeList}]],
            noticeList:[],
        	multipleSelection: [],
        	tableAllCheck: false,  // table 下方批量操作全选
            showChoice: false,
            hasfilterMore: false,  // 列表是否拥有更多筛选条件
            filterMore: false,  // 列表更多筛选条件是否展示
            conditions: {
                "noticeTitle": {
                    "operation": "LIKE",
                    "value": ""
                },
                "state": {
                    "operation": "EQ",
                    "value": ""
                }
            },
            pageSizeList: [5, 10, 20, 50],
            totalNum: 0,
            currentPage: 1, //当前页码数
            pageSize: 10,

            act: 0, //tab选项

            isLeft: false, //左右阴影
            isRight: false,

            tableData: [],
        },
        created: function() {
            var self = this;
            var queryMessage = {
                "queryPage": self.currentPage,
                "pageShow": self.pageSize,
                "queryParams": self.conditions,
                "sortMap": {
                    "sortValue": "asc"
                }
            };
            $.ajax({
                url: "/backstage/cms/notice/list",
                type: "POST",
                data: JSON.stringify(queryMessage),
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                success: function(data) {
                    if (data && data.returnCode == "1") {
                        self.noticeList = data.returnMessage;
                        self.totalNum = data.pager.totalNum;
                    }
                }
            });
        },
        methods: {
       	 // 表格选中项变化事件
		    handleSelectionChange(val) {
		        this.multipleSelection = val;
		    },
		    tableAllCheckFn(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row, this.tableAllCheck)
                    })
                }
            },
            handleCommand(command) {
                let self = this;
                if (self.multipleSelection.length <= 0) {
             	   self.$message({
                        message: '请先选择要删除的数据',
                        type: 'waring',
                        duration: 1000,
                        customClass: 'message-center'
                    });
                    return;
                }
                var deleteuIds = [];
                for (let i in this.multipleSelection) {
             	   deleteuIds.push(this.multipleSelection[i].uuid);
                }
                
                $.ajax({
                    url: "/backstage/cms/notice/delete",
                    type: "POST",
                    data: JSON.stringify(deleteuIds),
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function (data) {
                        if (data && data.returnCode == "1") {
                     	   self.$message({
                                message: '删除成功',
                                type: 'success',
                                duration: 1000,
                                customClass: 'message-center'
                            });
                     	   self.queryNotice();
                        } else {
                     	   self.$message({
                                message: '删除失败',
                                type: 'error',
                                duration: 1000,
                                customClass: 'message-center'
                            });
                        }
                    }
                });
                
             },
            handleQuery() {
                this.currentPage = 1;
                this.queryNotice();
            },
            handleClear() {
                this.conditions.noticeTitle.value = "";
                this.conditions.state.value = "";
            },
            // 列表筛选项更多操作
            toggleMoreSearch() {
                this.filterMore = !this.filterMore;
            },
            handleSizeChange: function (val) {
                this.pageSize = val;
                this.queryNotice();
            },
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.queryNotice();
            },
            handleCurrentTable: function (val) {
                window.location.href = 'edit.html?no=' + val.no;
            },
            queryNotice: function() {
                var self = this;
                var queryMessage = {
                    "queryPage": self.currentPage,
                    "pageShow": self.pageSize,
                    "queryParams": self.conditions,
                    "sortMap": {
                        "sortValue": "asc"
                    }
                };
                $.ajax({
                    url: "/backstage/cms/notice/list",
                    type: "POST",
                    data: JSON.stringify(queryMessage),
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function(data) {
                        if (data && data.returnCode == "1") {
                            self.noticeList = data.returnMessage;
                            self.totalNum = data.pager.totalNum;
                        }
                    }
                });
            },
            handleAdd() {
                window.location.href = "/backstage/cms/notice/toadd";
            },
            handleEdit(position, row) {
                window.location.href = "/backstage/cms/notice/toedit" + "/" + row.uuid;
            },
            handleDelete(position, row) {
                var self = this;
                this.$confirm('确认删除该条数据？')
                    .then(_ => {
                    $.ajax({
                    url: "/backstage/cms/notice/delete",
                    type: "POST",
                    data: JSON.stringify([row.uuid]),
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function (data) {
                        if (data && data.returnCode == "1") {
                            self.$alert('删除成功', {
                                confirmButtonText: '确定',
                                callback: action => {
                                window.location.href = "/backstage/cms/notice/tolist"
                        }
                        });
                        } else {
                            self.$alert('删除失败', {
                                confirmButtonText: '确定',
                                callback: action => {
                                window.location.href = "/backstage/cms/notice/tolist"
                        }
                        });
                        }
                    }
                });
            })
            }
        }
    });
</script>
</body>
</html>